const path = require("path") // Node.js 内置模块，专门用于操作路径

// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数，
// 作用：用于项目启动成功后，直接打开 index.html，而不用手动点到 src 目录下打开 index.html
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个页面
    template: './src/index.html',
    // 指定复制出来的文件名和存放路径
    filename: './index.html'
})

// 每次打包发布时，自动清理 dist 文件中的旧文件插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// module.exports：使用的是 Node.js 中的导出语法，表示向外导出一个 webpack 的配置对象
module.exports = {
    // 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
    // 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap（不设置就是关闭）
    devtool: 'nosources-source-map',
    // mode：代表 webpack 运行的模式，可选值有 development 和 production
    // 结论：开发时候一定要用 development，因为打包速度快，打包时不压缩文件，打包后相对 production 文件体积大，
    // 反过来，发布上线的时候一定能要用 production，因为打包速度慢，打包时会压缩文件，打包后文件体积相对较小。
    mode: 'development', // 配置 webpack 运行模式
    entry: path.join(__dirname, './src/main.js'), // 配置入口文件
    output: {
        path: path.join(__dirname, './dist'), // 输出路径，__dirname：当前文件所在路径
        filename: 'js/bundle.js' // 配置输出文件
    },
    plugins: [htmlPlugin, new CleanWebpackPlugin()], // 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
    devServer: {
        open: true, // 初次打包完后，在浏览器中自动打开链接
        port: 8081, // 实时打包所使用的端口号
        host: '127.0.0.1' // 实时打包所使用的主机地址
    },
    // module：所有第三方文件模块的匹配规则
    module: {
        // rules：文件后缀名的匹配规则
        rules: [
            // 处理以 .css 结尾的样式文件
            // loader：加载器，webpack 只能处理 js 文件，所以其他文件就需要加载器进行转换
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // 处理以 .less 结尾的样式文件
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // 处理以 .jpg，.png，.gif 结尾的图片文件
            // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
            // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
            // limit 表示文件的最大字节不超过该值，outputPath 表示指定该文件的输出路径
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' },
            // 使用 babel-loader 处理高级的 JS 语法
            // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件，exclude 表示排除
            // 因为第三方包中的 JS 兼容性，不需要程序员关心
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    },
    resolve: {
        alias: {
            // 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
            '@': path.join(__dirname, './src/')
        }
    }
}
